<template>
	<view class="configuration">
		<view class="top-box">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>配置管理</el-breadcrumb-item>
				<el-breadcrumb-item>{{ getBreadcrumb }}</el-breadcrumb-item>
			</el-breadcrumb>
			
			<view class="header-serch flex ac jcsb">
				<view class="search-box flex ac">
					<view class="search flex ac">
						<view class="search-title w74" v-if="!second">账号名：</view>
						<view class="search-title" v-else>链接名称：</view>
						<el-input v-model="phone" :placeholder="!second? '请输入账号名':'请输入链接名称'" style="height: 32px;"></el-input>
					</view>
					<view class="search flex ac">
						<view class="search-title" v-if="!second">姓名：</view>
						<view class="search-title" v-else>渠道：</view>
						<el-input v-model="name" :placeholder="!second? '请输入姓名':'请输入渠道'"></el-input>
					</view>
					<view class="search-btn">
						<el-button type="primary" class="search-button" @click='search'>查询</el-button>
					</view>
				</view>
				<el-button class="add-user" type="primary" @click='openDelog(0)' v-if="!second">+ 创建用户</el-button>
				<el-button class="add-user" type="primary" @click='openDelog(1)' v-if="second == 1">+ 新增链接</el-button>
			</view>
			
			<el-table 
				:data="Table.TableDataList" 
				style="width: 100%;" 
				height="calc(100vh - 298px)"
				stripe
				:header-cell-style="{background:'#E9ECEE',color:'#16171F'}">
				<el-table-column 
					show-overflow-tooltip 
					:prop="item.prop" 
					:label="item.label" 
					v-for="(item,index) in newTitleList"
					:key="index"
					:min-width="item.width">
					<template slot-scope="scope">
						<!-- <span v-if="item.prop != 'status'&&item.prop != 'auditStatus'">{{ scope.row[item.prop] }}</span>
						<span v-if="item.prop == 'status'">{{statusType(scope.row[item.prop]) }}</span>
						<span v-if="item.prop == 'auditStatus'">{{auditStatusType(scope.row[item.prop]) }}</span> -->
						<!-- <el-button v-for="(k, i) in scope.row.editor" :key="i" @click='btn(i,scope)' :type="k.type"
							:size="k.size" :disabled="k.disabled"
							v-if="item.prop == 'editor'&&second==0||item.prop=='mediaStatus'&&second==1"
							:style="{color: k.color}">{{ k.name }}</el-button> -->
						
						
						<!-- 用户管理  所属平台 -->
						<span v-if="item.prop && item.prop == 'userType'">{{ getUserType(scope.row[item.prop], scope.row['roles'], scope.row) }}</span>
						
						<!-- 活动配置，广告链接  [链接状态] -->
						<view v-if="second && (item.prop == 'h5Status' || item.prop == 'tpStatus')">
							<el-switch v-if="scope.row[item.prop]" :value="false"></el-switch>
							<el-switch v-else :value="true"></el-switch>
						</view>
						<!-- 每一项的值 -->
						<span v-if="item.prop && item.prop != 'userStatus' && item.prop != 'h5Status' && item.prop != 'tpStatus' && item.prop != 'userType'" @click="copyClick(item.prop, scope.row)">{{ (item.prop == 'createDate' || item.prop == 'updateDate' || item.prop == 'createTime' || item.prop == 'updateTime')? new Date(scope.row[item.prop]).format():(scope.row[item.prop]) }}</span>
						
						<!-- 用户审核 审核状态 -->
						<span v-if="item.prop && item.prop == 'userStatus'" class="start-color" :class="{ 'yes': scope.row[item.prop] == 0, 'no': (scope.row[item.prop] == 3 || scope.row[item.prop] == 1) }">{{ getUserStatus(scope.row[item.prop]) }}</span>
						
						<!-- 操作项 -->
						<!-- 用户管理 -->
						<view v-if="!item.prop && !second">
							<el-button class="del-color" @click="delClick(scope.row, 0)" type="text" size="small" v-if="scope.row['userType'] == 0 && scope.row['id'] != user.id && (scope.row['userType'] == 0 && scope.row['userName'] != '18408205732')">删除</el-button>
						</view>
						<!-- 活动配置 -->
						<view v-if="!item.prop && second == 1">
							<el-button :class="{ 'color-ccc': !scope.row['h5Status'] }" :disabled="Boolean(!scope.row['h5Status'])" class="start-color" @click="startOrStopClick(scope.row, 1)" type="text" size="small">启用</el-button>
							<el-button :class="{ 'color-ccc': scope.row['h5Status'] }" :disabled="Boolean(scope.row['h5Status'])" class="del-color" @click="startOrStopClick(scope.row, 0)" type="text" size="small">禁用</el-button>
							<el-button class="del-color" @click="delClick(scope.row, 1)" type="text" size="small">删除</el-button>
						</view>
						<!-- 广告链接 -->
						<view v-if="!item.prop && second == 2">
							<el-button class="start-color" @click="updateClick(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
							<el-button class="start-color" :class="{ 'color-ccc': !scope.row['tpStatus'] }" :disabled="Boolean(!scope.row['tpStatus'])" @click="startOrStopClick(scope.row, 1)" type="text" size="small">启用</el-button>
							<el-button class="del-color" :class="{ 'color-ccc': scope.row['tpStatus'] }" :disabled="Boolean(scope.row['tpStatus'])" @click="startOrStopClick(scope.row, 0)" type="text" size="small">禁用</el-button>
						</view>
					</template>
				</el-table-column>
			</el-table>
		</view>
		<view class="footer">
			<el-pagination  
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange"
				:current-page="Table.page"  
				layout="total, prev, pager, next, jumper, sizes" 
				background 
				:total="Table.count"
				:page-sizes="[10, 12]" 
				:page-size.sync="Table.limit">
			</el-pagination>
			<view class="pageLimit">当前显示{{Table.limit}}条/页</view>
		</view>
		
		<confirm @confirmFlagClick="confirmFlagClick" :confirmFlag="confirmFlag" :title="confirmTitle"></confirm>
		<accountDialog :dialogVisible="addUserDialogFlag" @closeDialog="closeDialog" :second="second" :title="addDialogTitle" :item="updateItem"></accountDialog>
	</view>
</template>

<script>
	import { Request } from '../model/request.js'
	import { Util } from '../utils/util.js'
	import confirm from './dialog/confirm.vue'
	import accountDialog from './dialog/accountDialog.vue'
	 
	export default {
		components: { confirm, accountDialog },
		
		props: {
			second: {
				type: [String, Number],
				default: 0
			}
		},
		
		computed: {
			getBreadcrumb() {
				let c = '用户管理'
				if (this.second == 1) {
					c = '活动配置'
				} else if (this.second == 2) {
					c = '广告链接'
				}
				return c
			},
			
			newTitleList() {
				if (this.second == 1) {
					return this.Table.titleList1
				} else if (this.second == 2) {
					return this.Table.titleList2
				} else {
					return this.Table.titleList
				}
			}
		},
		
		data() {
			return {
				phone: '',
				name: '',
				Table: {
					titleList: [{
							prop: "userName",
							label: "账号名"
						},
						// {
						// 	prop: "bankCard",
						// 	label: "银行卡"
						// },
						// {
						// 	prop: "address",
						// 	label: "住址"
						// },
						{
							prop: "phone",
							label: "联系电话"
						},
						{
							prop: "email",
							label: "邮箱",
							width: '120px'
						},
						{
							prop: "realName",
							label: "真实姓名"
						},
						{
							prop: "userStatus",
							label: "状态"
						},
						{
							prop: "userType",
							label: "用户类型"
						},
						{
							// prop: "mediaStatus",
							label: "操作"
						},
					],
					titleList1: [{
							prop: "id",
							label: "活动编码"
						},
						{
							prop: "h5Name",
							label: "链接名称"
						},
						{
							prop: "h5Link",
							label: "链接",
							width: '130px'
						},
						{
							prop: "channel",
							label: "渠道",
							width: '50px'
						},
						{
							prop: "h5Status",
							label: "链接状态"
						},
						{
							prop: "createDate",
							label: "创建时间"
						},
						{
							prop: "updateDate",
							label: "更新时间"
						},
						{
							// prop: "mediaStatus",
							label: "操作"
						}
					],
					titleList2: [{
							prop: "id",
							label: "链接ID"
						},
						{
							prop: "tpName",
							label: "链接名称"
						},
						{
							prop: "link",
							label: "链接",
							width: '130px'
						},
						{
							prop: "channel",
							label: "渠道"
						},
						{
							prop: "tpStatus",
							label: "链接状态"
						},
						{
							prop: "uvPrice",
							label: "uv价格"
						},
						{
							prop: "createTime",
							label: "创建时间"
						},
						{
							prop: "updateTime",
							label: "更新时间"
						},
						{
							// prop: "mediaStatus",
							label: "操作"
						}
					],
					TableDataList: [],
					result: '',
					page: 1,
					limit: 10,
					count: 0
				},
				
				confirmFlag: false,
				confirmTitle: '',
				confirmType: '',
				
				addUserDialogFlag: false,
				addDialogTitle: '创建用户',
				updateItem: '',
				
				currentDelItem: {},
				startOrStopItem: {},
				
				user: JSON.parse(Util.getStorage('user'))
			}
		},
		
		mounted() {
			this.initTable()
		},
		
		watch: {
			second(newVal, oldVal) {
				console.log(newVal, '-----------second')
				this.phone = ''
				this.name = ''
				this.Table.page = 1
				this.Table.limit = 10
				this.Table.count = 0
				this.initTable()
			}
		},
		
		methods: {			
			getUserType(i, type, e) {
				let { typeCode } = e
				if (i == 1) {
					return '流量主'
				} else if (i == 2) {
					if (typeCode == 1) {
						return '广告主-主体账户'
					} else if (typeCode == 2) {
						return '广告主-代理'
					} else if (typeCode == 3) {
						return '广告主-客户'
					}
					// return '广告主'
				} else if (i == 3) {
					if (typeCode == 1) {
						return 'DMP-主体账户'
					} else if (typeCode == 2) {
						return 'DMP-代理'
					} else if (typeCode == 3) {
						return 'DMP-客户'
					}
					// return 'DMP'
				} else {
					if (type == 'admin') {
						return '管理员'
					} else {
						return '普通用户'
					}
				}
			},
			
			getUserStatus(i) {
				if (i == 0) {
					return '可用'
				} else if (i == 1) {
					return '注销'
				} else if (i == 2) {
					return '审核中'
				} else {
					return '审核拒绝'
				}
			},
			
			// 用户查询
			search() {
				this.initTable()	
			},
			
			async initTable(page) {
				this.Table.TableDataList = []
				if (!Util.isNull(page)) {
					this.Table.page = page
				} else {
					this.Table.page = 1
				}
				if (this.second == 1) {
					let res = await Request.LINKFINDALL(this.Table.page, this.Table.limit, this.name, this.phone)
					if (!Util.isNull(res)) {
						this.Table.TableDataList = res.data.records
						this.Table.count = res.data.total
					} else {
						this.Table.TableDataList = null
					}
				} else if (this.second == 2) {
					let res = await Request.THIRDFINDALL(this.Table.page, this.Table.limit, this.name, this.phone)
					console.log(res, 'resssssss')
					if (!Util.isNull(res)) {
						this.Table.TableDataList = res.data.records
						this.Table.count = res.data.total
					} else {
						this.Table.TableDataList = null
					}
				} else {
					let res = await Request.USERALLADMIN(this.Table.page, this.Table.limit, this.name, this.phone)
					if (!Util.isNull(res)) {
						this.Table.TableDataList = res.data.records
						this.Table.count = res.data.total
					} else {
						this.Table.TableDataList = null
					}
				}
			},
			
			// 用户，活动，广告 【创建用户，新增链接】
			openDelog(i) {
				if (i) {
					this.addDialogTitle = '新增链接'
				} else {
					this.addDialogTitle = '创建用户'
				}
				this.addUserDialogFlag = true
			},
			
			closeDialog(flag) {
				this.addUserDialogFlag = false
				if ((typeof flag != 'function') && flag) {
					this.initTable()
				}
			},
			
			delClick(item, i) {
				this.confirmFlag = true
				this.currentDelItem = item
				if (i) {
					this.confirmTitle = '确认删除该项活动配置？'
				} else {
					this.confirmTitle = '确认删除用户？'
				}
			},
			
			// 确认框触发事件
			async confirmFlagClick(i) {
				if (i) { // 确认
					if (!this.second) { // 用户管理
						// 用户删除
						let res = await Request.USERDELETE(this.currentDelItem.id)
						if (res.code == 200) {
							Util.showToast('删除成功')
							this.initTable()
						}
					} else if (this.second == 1) { // 活动配置
						if (this.confirmType == 'switch') { // 开关确认框
							console.log('开关确认了')
						} else if (this.confirmType == 'start') { // 禁启用
							console.log('禁启用确认了')
							let res = await Request.LINKUPDATE(this.startOrStopItem.id, this.startOrStopItem.h5Status == 1? 0:1)
							if (res.code == 200) {
								Util.showToast('操作成功')
								this.initTable()
							}
						} else { // 删除
							console.log(this.currentDelItem, '6666666666666')
							let res = await Request.LINKDEL(this.currentDelItem.id)
							if (res.code == 200) {
								Util.showToast('删除成功')
								this.initTable()
							}
							console.log(res, '删除确认了')
						}
					} else { // 广告链接
						if (this.confirmType == 'switch') { // 开关确认框
							console.log('开关确认了')
						} else if (this.confirmType == 'start') { // 禁启用
							console.log('禁启用确认了')
							console.log(this.startOrStopItem.tpStatus, 'tpStatus')
							let res = await Request.THIRDUPDATESTATUS(this.startOrStopItem.id, this.startOrStopItem.tpStatus == 1? 0:1)
							if (res.code == 200) {
								Util.showToast('操作成功')
								this.initTable()
							}
						}
					}
				}
				this.confirmFlag = false
				this.confirmType = ''
			},
			
			handleSizeChange(val) {
				this.initTable()
				console.log(`每页 ${val} 条`, 'this.Table.limit：', this.Table.limit);
			},
			
			handleCurrentChange(val) {
				this.initTable(val)
				console.log(`当前页: ${val}`)
			},
			
			switchChange(item, index, e) {
				console.log(item, index, e, 'eee')
				this.startOrStopItem = item
				this.confirmType = 'switch'
				this.confirmFlag = true
				if (e) {
					this.confirmTitle = '确认启用用户？'
				} else {
					this.confirmTitle = '确认禁用用户？'
				}
			},
			
			// 活动配置，广告链接 【禁启用】
			startOrStopClick(item, i) {
				let str
				if (this.second == 1) { // 活动配置
					str = 'h5Link'
				} else if (this.second == 2) {
					str = 'link'
				}
				if (i) { // 启用
					this.confirmTitle = '确认启用链接：' + item[str]
				} else { // 禁用
					this.confirmTitle = '确认禁用链接：' + item[str]
				}
				this.startOrStopItem = item
				this.confirmType = 'start'
				this.confirmFlag = true
			},
			
			// 广告链接【编辑】
			updateClick(item, index) {
				this.addDialogTitle = '编辑'
				this.updateItem = item
				console.log(item, 'item')
				this.addUserDialogFlag = true
			},
			
			copyClick(t, item) {
				if (t == 'h5Link' || t == 'link') {
					Util.copy(item[t])
				}
			}
		}
	}
</script>

<style scoped>
	.configuration {
		/* padding: 20px 40px 50px; */
		position: relative;
	}
	
	.top-box {
		padding: 20px 40px 0;
	}
	
	.header-serch {
		margin: 30px 0;
	}
	
	.search-title {
		width: 100px;
		font-size: 14px;
		font-weight: 500;
		color: #16171F;
		text-align: right;
	}
	
	.w74 {
		width: 74px;
	}
	
	.search-btn {
		margin-left: 30px;
	}
	
	.footer {
		width: 100%;
		height: 40px;
		display: flex;
		align-items: center;
		/* position: absolute; */
		/* left: 0; */
		/* bottom: 0px; */
		justify-content: center;
		height: 130px;
		background: #FFFFFF;
		box-shadow: 0px -7px 9px 0px rgba(0, 0, 0, 0.02);
	}
	
	.del-color {
		color: #D1141F;
	}
	
	.start-color {
		color: #4A92FD;
	}
	
	>>> .el-input__inner{
		height: 32px;
	}
	
	.search-button, .add-user {
		font-size: 14px;
		height: 32px;
		line-height: 32px;
		padding-top: 0;
		padding-bottom: 0;
	}
	
	.color-ccc {
		color: #ccc;
	}
	
	.yes {
		color: #69BC2E;
	}
</style>
